<template>
	<view class="w_table">
		<view class="w_table_swper" :style="{ height:height? height.indexOf('%')!==-1?height:height+'upx':'100%' }">
			<view class="w_table_content">
				<!-- 表头 -->
				<view class="w-table_title" :style="{ background:headbBackground }">
					<view class="w-table_title_item"  v-for="(item,index) in columns" :class="{'w-table_title_item_border': border }"
					 :key="index" :style="[{ width:item.width?item.width+'rpx':'200rpx',textAlign:item.align||'left'},fontcolor]">
							<view class="w_table_title_content" v-if="item.type==='checkbox'">
								<checkbox @click.stop="checkHeader" :checked="allCheck" />
							</view>
							<view class="w_table_title_content" v-if="item.type==='index'">#</view>
							<text class="w_table_title_content" v-if="item.title">{{ item.title }}</text>
						</view>
					</view>
					<!-- 表体 -->
					<view class="w_table_body" v-if="data1.length" v-for="(item,index) in data1" :key="index">
						<view class="w_table_body_col"  v-for="(col,cIndex) in columns" :key="cIndex" 
						:style="[{ textAlign:col.align||'left','background-color':item.扫描状态=='已扫够'?'#ffaa00':(item.扫描状态=='未扫够'?'#aaff7f':'#ffffff')},bj]"
						 @click="clickRow(item,index)">
								<view   :class="{'col_cell_border':border }" :style="[{ width:col.width?col.width+'rpx':'200rpx'},borderRight]">
									<view class="col_text">
										<checkbox v-if="col.type==='checkbox'" :checked="item._isChecked" @click.stop="checkItemCheckbox(item,index)" />
										<view v-if="col.type==='index'">
											{{ index+1 }}
										</view>
										<!-- <Cell v-if="col.render" :row="item" :column="col" :index="index" :render="col.render" />
								        <text v-else-if="!col.render" v-html="item[col.key]"></text> -->
										<view>
											<text>{{item[col.key]}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="data1.length == 0" class="w_table_null">
						<view style="font-size:17px;color: #9B9B9B;font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;">{{ noDataText }}</view>
					</view>
				</view>
			</view>
</template>

<script>
	// import Cell from '../../common/cell.js'
	export default {
		components: {
			// Cell
		},
		props: {
			/**
			 * data要传入的数据数组
			 */
			data1: {
				type: Array,
				default () {
					return []
				}
			},
			columns: {
				type: Array,
				default () {
					return []
				}
			},
			border: {
				type: Boolean,
				default: false
			},
			height: {
				type: [Number, String],
				default:0
			},
			headbBackground: {
				type: String,
				default: "#C8C7CC"
			},
			noDataText: {
				type: String,
				default: "暂无数据"
			},
			tabindex: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				allCheck: false,
				tabClick: false, // true 表示是两次点击中的第一次点了 tabBar
				fontcolor:{
					backgroundColor:this.$kdup.color,
				},
				bj:{
				borderBottom:'1px dashed '+this.$kdup.color
				},
				borderRight:{
				borderRight:'2rpx dashed '+this.$kdup.color	
				}
			}
		},
		// data: () => {
			
		// 	}
		// },
		methods: {
			/** 
			 * 	-- 单击某一行时触发
			 * @param {Object} item为当前行的数据
			 * @param {Object} index为当前行的下标
			 */
			clickRow(row) {
				if (this.tabClick) { // 200ms 内再次点击 模仿双击事件
					let params = {
						row
					}
					this.$emit('on-row-click', params)
				}
				this.tabClick = true
				setTimeout(() => {
					this.tabClick = false // 200ms 内没有第二次点击，就当作单击
				}, 200)
			},
			/**
			 * 	--	 点击全选
			 */
			checkHeader() {
				this.allCheck = !this.allCheck;
				this.data1.forEach(it => {
					it._isChecked = this.allCheck;
				})
				let ary = this.data1.filter(item => item._isChecked); //已选择的项
				this.$emit('on-select-all', {
					allChecked: ary
				})

			},
			/**
			 * 	--	点击单选
			 */
			checkItemCheckbox(item) {
				item._isChecked = !item._isChecked;
				this.data1.forEach(it => {
					if (!it._isChecked) {
						this.allCheck = false;
					}
				})
				let ary = this.data1.filter(item => item._isChecked); //已选择的项
				if (ary.length == this.data1.length) {
					this.allCheck = true
				}
				this.$emit('on-select', {
					allChecked: ary,
					checked: item
				})
			},
			isfalse(e) {
				this.allCheck=false;
				e.forEach(it => {
					it._isChecked = false;
				})
			}
		},
		mounted() {

		}

	}
</script>

<style>
	.w_table {
		width: 100%;
		position: relative;
		display: inline-block;
		height: 100%;
		min-height: 130upx;
		min-width: 100%;
		background: #fff;
		font-size: 14upx;
		box-sizing: border-box;
		overflow: scroll;
	}

	.w_table_swper {
		height: 100%;
		box-sizing: border-box;
	}

	.w_table_content {
		height: 100%;
		width: 100%;
	}

	.w-table_title {
		font-size: 15px;
		color: white;
		width: fit-content;
		height: 70upx;
		display: flex;
		justify-content: space-between;
		line-height: 70upx;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.w-table_title_item {
		display: inline-block;
	}

	.w-table_title_item_border {
		border-right: 2upx dashed #fff;
	}

	.w_table_title_content {
		padding: 0 10upx;
	}

	.w_table_body {
		font-size: 15px;
		display: flex;
		justify-content: space-between;
	}

   /* 表格下划线 */
	.w_table_body_col {
		height: 90upx;
		line-height: 85upx;
		box-sizing: border-box;
		width: 100%;
		margin: 0 auto;
	}
	.w_table_body_col>.col_cell {
		display: inline-block;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.col_cell_border {
	}

	.col_cell_last {
		border: none;
	}

	.col_text {
		display: inline-block;
		/* padding: 0 10upx; */
		margin: 0 auto;
	}

	.w_table_null {
		width: 100%;
		height: 60upx;
		position: absolute;
		top: 60upx;
		line-height: 60upx;
		text-align: center;
	}
</style>
